<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>棉花糖乐谱</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" type="text/css" href="css/input/normalize.css" />
  <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
  <link rel="stylesheet" type="text/css" href="css/input/demo.css" />
  <link rel="stylesheet" type="text/css" href="css/input/component.css" />
  <link rel="stylesheet" href="css/index.css">
  <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  background: #e2b29f;
  font-size: 120%;
}

.rabbit {
  width: 5em;
  height: 3em;
  background: #ffffff;
  border-radius: 70% 90% 60% 50%;
  position: relative;
  box-shadow: -0.2em 1em 0 -0.75em #b78e81;
  -moz-transform: rotate(0deg) translate(-2em, 0);
  -ms-transform: rotate(0deg) translate(-2em, 0);
  -webkit-transform: rotate(0deg) translate(-2em, 0);
  transform: rotate(0deg) translate(-2em, 0);
  animation: hop 1s infinite linear;
  z-index: 1;
}
.no-flexbox .rabbit {
  margin: 10em auto 0;
}
.rabbit:before {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  background: white;
  border-radius: 100%;
  top: 0.5em;
  left: -0.3em;
  box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 1em 0 white, 4em 1em 0 -0.3em white, 4em 1em 0 -0.3em white, 4em 1em 0 -0.4em white;
  animation: kick 1s infinite linear;
}
.rabbit:after {
  content: "";
  position: absolute;
  width: .75em;
  height: 2em;
  background: white;
  border-radius: 50% 100% 0 0;
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  right: 1em;
  top: -1em;
  border-top: 1px solid #f7f5f4;
  border-left: 1px solid #f7f5f4;
  box-shadow: -0.5em 0em 0 -0.1em white;
}

.clouds {
  background: white;
  width: 2em;
  height: 2em;
  border-radius: 100% 100% 0 0;
  position: relative;
  top: -5em;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  animation: cloudy 1s infinite linear forwards;
  box-shadow: 5em 2em 0 -0.3em white, -2em 2em 0 0 white;
}
.clouds:before, .clouds:after {
  content: '';
  position: absolute;
  box-shadow: 5em 2em 0 -0.3em white, -2em 2em 0 white;
}
.clouds:before {
  width: 1.25em;
  height: 1.25em;
  border-radius: 100% 100% 0 100%;
  background: white;
  left: -30%;
  bottom: 0;
}
.clouds:after {
  width: 1.5em;
  height: 1.5em;
  border-radius: 100% 100% 100% 0;
  background: white;
  right: -30%;
  bottom: 0;
}

@keyframes hop {
  20% {
    -moz-transform: rotate(-10deg) translate(1em, -2em);
    -ms-transform: rotate(-10deg) translate(1em, -2em);
    -webkit-transform: rotate(-10deg) translate(1em, -2em);
    transform: rotate(-10deg) translate(1em, -2em);
    box-shadow: -0.2em 3em 0 -1em #b78e81;
  }
  40% {
    -moz-transform: rotate(10deg) translate(3em, -4em);
    -ms-transform: rotate(10deg) translate(3em, -4em);
    -webkit-transform: rotate(10deg) translate(3em, -4em);
    transform: rotate(10deg) translate(3em, -4em);
    box-shadow: -0.2em 3.25em 0 -1.1em #b78e81;
  }
  60%,75% {
    -moz-transform: rotate(0) translate(4em, 0);
    -ms-transform: rotate(0) translate(4em, 0);
    -webkit-transform: rotate(0) translate(4em, 0);
    transform: rotate(0) translate(4em, 0);
    box-shadow: -0.2em 1em 0 -0.75em #b78e81;
  }
}
@keyframes kick {
  20%,50% {
    box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 1.5em 0 white, 4em 1.75em 0 -0.3em white, 4em 1.75em 0 -0.3em white, 4em 1.9em 0 -0.4em white;
  }
  40% {
    box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 2em 0 white, 4em 1.75em 0 -0.3em white, 4.2em 1.75em 0 -0.2em white, 4.4em 1.9em 0 -0.2em white;
  }
}
@keyframes cloudy {
  40% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
    opacity: 0.75;
    -moz-transform: translate(-3em, 0);
    -ms-transform: translate(-3em, 0);
    -webkit-transform: translate(-3em, 0);
    transform: translate(-3em, 0);
  }
  55% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transform: translate(-4em, 0);
    -ms-transform: translate(-4em, 0);
    -webkit-transform: translate(-4em, 0);
    transform: translate(-4em, 0);
  }
  90% {
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

    </style>

</head>

<body>
<div class="box">
  <div class="top">
    <img src="./img/mht-music/home_title.png" class="logo">
  </div>
  <div class="main">
    <div class="left te">
      <div class="te_">
        <img src="./img/mht-music/mht-wechart.png" class="er_logo">
        <div class='rabbit'></div>
        <div class='clouds'></div>
        <div class="login_introduction">
          <p>扫一扫打开微信读谱小程序</p>
        </div>
      </div>
    </div>
    <div class="right te">
      <div class="r_main">
        <section class="content">
          <span class="input input--hoshi">
					<input class="input__field input__field--hoshi" type="text" id="input-6" />
					<label class="input__label input__label--hoshi input__label--hoshi-color-3" for="input-6">
						<span style="margin-top: -45px;color: #fff;" class="input__label-content input__label-content--hoshi">请输入暗号：</span>
					</label>
				</span>
        </section>
        <p class="btn_">
          <button class="button blue medium">对暗号</button>
          <button class="button blue medium">匿名进</button>
        </p>
        <p style="padding: 3em 0;margin-left: 10px;" class="content right—text">如果没有暗号，那么可以扫旁边的二维码，小程序会给你一个专属于你的暗号！它就是你使用云图谱的凭证！</p>
      </div>
    </div>
  </div>
  <div class="bottom">作者@棉花糖漂泊在远方 qq841861251</div>
</div>

  

</body>
<script src="js/classie.js"></script>
<script>
    (function() {
        // trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
        if (!String.prototype.trim) {
            (function() {
                // Make sure we trim BOM and NBSP
                var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
                String.prototype.trim = function() {
                    return this.replace(rtrim, '');
                };
            })();
        }

        [].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
            // in case the input is already filled..
            if( inputEl.value.trim() !== '' ) {
                classie.add( inputEl.parentNode, 'input--filled' );
            }

            // events:
            inputEl.addEventListener( 'focus', onInputFocus );
            inputEl.addEventListener( 'blur', onInputBlur );
        } );

        function onInputFocus( ev ) {
            classie.add( ev.target.parentNode, 'input--filled' );
        }

        function onInputBlur( ev ) {
            if( ev.target.value.trim() === '' ) {
                classie.remove( ev.target.parentNode, 'input--filled' );
            }
        }
    })();
</script>
</html>
